currentTarget works when I add style the html element. How can I access the style file of the clicked element without without adding style the html element?
const all = document.querySelectorAll(".all");
all.forEach((button) => {
button.addEventListener("click", (e) => {
let bgColor = e.currentTarget.style.backgroundColor;
console.log(bgColor);
});
});div {
color: white;
height: 2em;
width: 15em;
margin: 2em;
padding: 2em;
background-color: royalblue;
}
span {
color: white;
height: 2em;
width: 15em;
margin: 2em;
padding: 2em;
background-color: red;
}<div class="all">I'm a thin, big and insulated also soft, prickly box.</div>
<span style="background-color: black;" class="all">I am useless</span>https://jsfiddle.net/bcz0t6gx/
Use window.getComputedStyle() to get the CSSStyleDeclaration of the element and getPropertyValue() to get the value of the CSS property:
const all = document.querySelectorAll(".all");
all.forEach((button) => {
button.addEventListener("click", (e) => {
let bgColor = window.getComputedStyle(e.currentTarget).getPropertyValue("background-color");
console.log(bgColor);
});
});.all {
color: white;
height: 2em;
width: 15em;
margin: 2em;
padding: 2em;
background-color: royalblue;
}
span {
color: white;
height: 2em;
width: 15em;
margin: 2em;
padding: 2em;
background-color: red;
}<div class="all">I'm a thin, big and insulated also soft, prickly box.</div>
<span style="background-color: black;" class="all">I am useless</span>You can use window.getComputedStyle to find styles applied to an element. The following getStyle function makes this simple.
const getstyle=function(n,css){
let style;
if( window.getComputedStyle ){
style = window.getComputedStyle( n, null ).getPropertyValue( css );
} else if( n.currentStyle ){
css = css.replace(/\-(\w)/g, function ( strMatch, p1 ){
return p1.toUpperCase();
});
style = n.currentStyle[ css ];
} else {
style='';
}
return style;
};
document.querySelectorAll(".all").forEach((button) => {
button.addEventListener("click", (e)=>{
console.log( getstyle(e.currentTarget,'background-color') );
});
});.all {//changed this to prevent console becoming weird
color: white;
height: 2em;
width: 15em;
margin: 2em;
padding: 2em;
background-color: royalblue;
}
span {
color: white;
height: 2em;
width: 15em;
margin: 2em;
padding: 2em;
background-color: red;
}<div class="all">I'm a thin, big and insulated also soft, prickly box.</div>
<span style="background-color: black;" class="all">I am useless</span>